<template>
  <div style="background-color: #F3F5F8;">
    <el-row style="margin: 15px 9px;" :gutter="10">
      <el-col style="padding-left: 40px;padding-top:20px;background-color: white;" :xs="24" :sm="24">
        <div class="user-header">
          <el-avatar class="avatar" :src="avatar"></el-avatar>
        </div>
        <div class="user-info" style="margin-left: 10px;">
          <div class="random-message">
            早上好, {{name}}, 今天吃了什么好吃的呢
          </div>
          <div class="user-dept">
            <span>{{department}}</span> | <span>{{username}}</span>
          </div>
          <div class="user-login-info">
            {{comName}} ( {{comCode}} )
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name',
        'avatar',
        'department',
        'comCode',
        'comName',
        'username'
      ])
    }
  }
</script>

<style lang="scss" scoped>

  .user-header {
    display: inline-block;
    vertical-align: middle;

  }

  .user-info {
    display: inline-block;
    vertical-align: middle;

    .random-message {
      font-size: 1rem;
      margin-bottom: .5rem;
    }

    .user-dept, .user-login-info {
      color: rgba(0, 0, 0, 0.45);
      margin-bottom: .5rem;
      font-size: .8rem;
      line-height: 1.1rem;
    }
  }

  .avatar {
    width: 90px;
    height: 90px;
  }
</style>
